<template>
  <div class="app-container">
    <el-row justify="center">
      <el-col :span="3" class="card-box">
        <el-button type="primary" size="large" @click="flushAvgDensity">计算平均密度</el-button>
      </el-col>
      <el-col :span="3" class="card-box">
        <el-button size="large" icon="Refresh" circle @click="getList"></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="card-box">
        <span style="font-size: 28px;font-weight: bold;text-align: center">{{ '当前平均密度：' + avgDensity}}</span>
      </el-col>
    </el-row>
    <el-row v-if="rowDataList && rowDataList.length > 0">
      <el-col :span="24">
        <div class="el-table el-table--enable-row-hover el-table--medium self-box-1">
          <table class="el-table__header self-table-1" border="1" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
              <th class="el-table__cell is-leaf" style="width: 100px;"><div class="cell">日期</div></th>
              <th v-for="(rowData,index) in rowDataList" :key="index" class="el-table__cell is-leaf" style="width: 160px;"><div class="cell">{{ parseTime(rowData.beginTime, '{y}-{m}-{d}') }}</div></th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td class="el-table__cell is-leaf"><div class="cell">开始时间</div></td>
              <td v-for="(rowData,index) in rowDataList" :key="index" class="el-table__cell is-leaf"><div class="cell">{{ rowData.beginTime }}</div></td>
            </tr>
            <tr>
              <td class="el-table__cell is-leaf"><div class="cell">结束时间</div></td>
              <td v-for="(rowData,index) in rowDataList" :key="index" class="el-table__cell is-leaf"><div class="cell">{{ rowData.endTime }}</div></td>
            </tr>
            <tr>
              <td class="el-table__cell is-leaf"><div class="cell">体积</div></td>
              <td v-for="(rowData,index) in rowDataList" :key="index" class="el-table__cell is-leaf"><div class="cell" >{{ rowData.volume + ' m³'}}</div></td>
            </tr>
            <tr>
              <td class="el-table__cell is-leaf"><div class="cell">煤种</div></td>
              <td v-for="(rowData,index) in rowDataList" :key="index" class="el-table__cell is-leaf">
                <div class="cell" >
                  <el-select v-model="dataRowMap[rowData.id+'_coalKind']" placeholder="选择煤种" clearable>
                    <el-option label="混煤" value="1"/>
                    <el-option label="特低灰" value="2"/>
                  </el-select>
                </div>
              </td>
            </tr>
            <tr>
              <td class="el-table__cell is-leaf"><div class="cell">重量</div></td>
              <td v-for="(rowData,index) in rowDataList" :key="index" class="el-table__cell is-leaf">
                <div class="cell" >
                  <el-input v-model="dataRowMap[rowData.id+'_weight']" placeholder="输入重量" ><template #append>t</template></el-input>
                </div>
              </td>
            </tr>
            <tr>
              <td class="el-table__cell is-leaf"><div class="cell">水分</div></td>
              <td v-for="(rowData,index) in rowDataList" :key="index" class="el-table__cell is-leaf">
                <div class="cell" >
                  <el-input v-model="dataRowMap[rowData.id+'_moisture']" placeholder="输入水分" ><template #append>%</template></el-input>
                </div>
              </td>
            </tr>
            <tr>
              <td class="el-table__cell is-leaf"><div class="cell">灰度</div></td>
              <td v-for="(rowData,index) in rowDataList" :key="index" class="el-table__cell is-leaf">
                <div class="cell" >
                  <el-input v-model="dataRowMap[rowData.id+'_grayscale']" placeholder="输入灰度" ><template #append>%</template></el-input>
                </div>
              </td>
            </tr>
            <tr>
              <td class="el-table__cell is-leaf"><div class="cell">密度</div></td>
              <td v-for="(rowData,index) in rowDataList" :key="index" class="el-table__cell is-leaf"><div class="cell" >{{ densityIsEmpty(rowData.density) }}</div></td>
            </tr>
            </tbody>
          </table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="RowData">
import { allListRowData, uploadData } from "@/api/coal/rowData";

const { proxy } = getCurrentInstance();

const rowDataList = ref([]);
const loading = ref(true);
const dataRowMap = ref({});
const avgDensity = ref('未计算');

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    deviceId: null,
    deviceName: null,
    beginTime: null,
    endTime: null,
    volume: null,
    coalKind: null,
    weight: null,
    varchar: null,
    moisture: null,
    grayscale: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    remark: null
  },
});

const { queryParams } = toRefs(data);

/** 查询每天每列统计列表 */
function getList() {
  loading.value = true;
  queryParams.value.params = {};
  rowDataList.value = []
  dataRowMap.value = {}
  avgDensity.value = '未计算'
  allListRowData(queryParams.value).then(response => {
    listToMap(response.data)
    rowDataList.value = response.data;
    avgDensity.value = densityIsEmpty(response.avgDensity);
    loading.value = false;
  });
}

function listToMap(list){
  list.forEach(e=>{
    dataRowMap.value[e.id + '_coalKind'] = e.coalKind
    dataRowMap.value[e.id + '_weight'] = e.weight
    dataRowMap.value[e.id + '_moisture'] = e.moisture
    dataRowMap.value[e.id + '_grayscale'] = e.grayscale
  })
}

function densityIsEmpty(data){
  if (data === '' || data === null || data === 'null' || data === undefined || data.length ===0){
    return '未计算'
  } else {
    if (typeof data === 'string'){
      return data + ' t/m³'
    }
    let content = '';
    data.forEach(e=>{
      if (e.coalKind === '1') {
        content = content + '混煤为' + e.density + ' t/m³，'
      }
      if (e.coalKind === '2') {
        content = content + '特低灰为' + e.density + ' t/m³'
      }
    })
    return content
  }
}

function flushAvgDensity(){
  uploadData(dataRowMap.value).then(response =>{
    proxy.$modal.msgSuccess("计算成功");
    getList()
  })
}
getList();
</script>
<style lang="scss">
.self-box-1 {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
}

.self-table-1 {
  width: 100%;
  word-break: break-all;
  flex-shrink: 0;
}

//滚动条css
.self-box-1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}

.self-box-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #cecece;
}

.self-box-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  /*border-radius: 5px;*/
  background: #fff;
}
</style>
